<template>
  <div>
    <h2 class="title">用户登录</h2>
    <a-form
      :model="loginForm"
      style="max-width: 480px; margin: 0 auto"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: '请输入用户名!' }]"
      >
        <a-input v-model:value="loginForm.loginAccount"></a-input>
      </a-form-item>
      <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
      >
        <a-input type="password" v-model:value="loginForm.loginPassword"></a-input>
      </a-form-item>
      <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
        <a-checkbox v-model:checked="loginForm.remember">记住密码</a-checkbox>
      </a-form-item>
      <a-form-item
        :wrapper-col="{ offset: 8, span: 16 }"
        style="display: flex; justify-content: space-between"
      >
        <a-button html-type="submit" type="primary" @click="handleSubmit">登录</a-button>
        <a-button html-type="button" style="margin: 0 8px">注册</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { userLogin } from '@/api/user/index'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
import { useUserStore } from '@/stores/modules/user';

const router = useRouter()
const userStore = useUserStore()
const loginForm = reactive({
  loginAccount: '',
  loginPassword: '',
})
const handleSubmit = () => {
  userLogin(loginForm).then(res => {
    message.success('登录成功!')
    router.push('/admin/userManage')
    userStore.setLoginUser(res.data)
    console.log("userStore",userStore.loginUser);

  })
}
</script>

<style>
.title {
  align-items: center;
}
</style>
